


AO3 Mouseover/Hovertext Tutorial

by Besina



Category: Original Work
Genre: Other
Language: English
Status: Completed
Published: 2017-09-18
Updated: 2017-09-18
Packaged: 2018-12-31 03:47:21
Rating: Not Rated
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 1
Words: 199
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/12123858
Author URL: https://archiveofourown.org/users/Besina/pseuds/Besina
Summary: Some people wonder how to do the mouseovers and hovertext on AO3.  This comes in especially handy if you want  translations of the text you've written to show up when the original text is moused over (you, of course, must provide the translation). While there are ways to do this in CSS coding, AO3 is not set up to allow it.  However, you can do it in basic HTML, and there's a couple different ways to get the look you want.  So here you go!





	AO3 Mouseover/Hovertext Tutorial

**First things first:**  
  
Go in to edit your document, and switch from Rich Text Mode, to HTML mode (buttons are at the top of the text entry area). If, for some reason, your hovertext is not showing up correctly, 9 times out of 10, it'll be because you were in the wrong mode.  
  
When testing it out, please wait a second or two for the hovertext to show up.

  


* * *

**To show the hover/mouseover text over normal-looking text:**

This is the text I want to have a mouseover

do this:  
<span title="Mouseover text goes here">This is the text I want to have a mouseover</span>

  


* * *

**To have a little dotted line underneath and a ? come up to indicate that hover/mouseover text is available:**

This is the text I want to have a mouseover

do this:  
<abbr title="Mouseover text goes here">This is the text I want to have a mouseover</abbr>

  


* * *

**To have it show up looking like a link, but one that doesn't go anywhere:**

This is the text I want to have a mouseover

do this:  
<a title="Mouseover text goes here">This is the text I want to have a mouseover</a>


End file.
